<template>
  <div class="order container-fluid">
      <div id="chart">
          <order-chart :cdata="orders" :balance="balance" :height="300" />
      </div>
      <div class="pending-order">
        <div class="row" v-for="porder in pendingOrders">
            <div class="col-md-1 col-xs-1">{{ porder.RBR }}</div>
            <div class="col-md-2 col-xs-7">{{ porder.CD }}</div>
            <div class="col-md-1 col-xs-2 text-right">{{ tofixed(porder.RBA) }}</div>
            <div class="col-md-1 col-xs-2 text-right">{{ tofixed(porder.PWA - porder.RBA) }}</div>
            <div class="col-md-3 col-xs-12">{{ porder.OL[0].TN }}</div>
            <div class="col-md-2 col-xs-6">{{ porder.OL[0].CN.replace('Ž', ' vs ')  }}</div>
            <div class="col-md-2 col-xs-6 text-right"><span v-if="porder.orgin">{{ porder.orgin.date }} {{ porder.orgin.time }}</span></div>
        </div>
      </div>
      <div class="closed-order">
        <div class="row" v-for="order in orders">
            <div class="col-md-1 col-xs-1" v-bind:class="[order.FT=='赢' ? 'glyphicon glyphicon-ok':'glyphicon glyphicon-remove']"> </div>
            <div class="col-md-2 col-xs-7">{{ order.RBR }}</div>
            <div class="col-md-1 col-xs-2 text-right">{{ tofixed(order.PWA) }}</div>
            <div class="col-md-1 col-xs-2 text-right" v-bind:class="[order.CD > 0?'win':'lost']">{{ tofixed(order.CD) }}</div>
            <div class="col-md-4 col-xs-12">{{ order.OL[0].TN }}</div>
            <div class="col-md-3 col-xs-12">{{ order.OL[0].CN.replace('Ž', ' vs ')  }}</div>
        </div>
      </div>
  </div>
</template>

<script>
    /* eslint-disable */
    import service from '@/core/service'
    import eventBus from '@/core/eventBus'
    import orderChart from '@/components/orderChart'

    var data = {
        orders: [],
        pendingOrders: []
    }

    export default {
        name: 'order',
        props: ['balance'],
        components: {
            orderChart
        },
        created() {
            this.getData();
            var self = this;
            eventBus.$on('refreshOrder', (route) => {
                self.getData();
            });
        },
        mounted() {},
        beforeDestroy() {
            eventBus.$off('refreshOrder');
        },
        methods: {
            getData: function() {
                this.$Progress.start();
                service.getOrder().then((d) => {
                    this.orders = d;
                });
                service.getPendingOrder().then((d) => {
                    this.pendingOrders = d;
                    this.$Progress.finish();
                });
            },
            tofixed: function(d) {
                return parseFloat(d).toFixed(2);
            }
        },
        data() {
            return data
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .pending-order .row {
        color: #333;
        background: #E0EEEF;
        /*font-weight: bold;*/
    }
    
    .order .row {
        padding: 10px 0 10px;
        border-bottom: 1px solid #ddd;
    }
    
    .order .row .glyphicon-ok,
    .order .row .win {
        color: green;
    }
    
    .order .row .glyphicon-remove,
    .order .row .lost {
        color: red;
    }
    
    #chart {
        padding-top: 10px;
    }
</style>